<template>
    <div class="mine">
        <van-tabs v-model="active" style="margin-bottom: 5px" @click="tabChange">
            <van-tab title="待付款"></van-tab>
            <van-tab title="已完成"></van-tab>
            <van-tab title="已取消"></van-tab>
            <van-tab title="半付款"></van-tab>
        </van-tabs>
        <van-list
                v-model="config.loading"
                :finished="config.finished"
                finished-text="没有更多了"
                @load="order"
                :immediate-check="false"
        >
            <div class="border-bottom order-list" v-for="(item,index) in list" :key="index">
                <van-card
                        :price="item.nmoney"
                        :desc="item.goods_brief"
                        :title="item.goods_title"
                        :thumb="item.goods_image"
                >
                    <template #price>
                        <div class="flex-row justify-content-between align-items-center">
                            <div><span class="van-card__price-currency">¥</span><span class="van-card__price-integer">{{item.nmoney}}</span>
                            </div>
                            <div v-if="item.state==4" style="color: #ff6f00"> 还需支付{{item.nmoney - item.pmoney}}</div>
                        </div>
                    </template>
                    <template #tags>
                        <van-tag plain type="danger">{{item.state_name}}</van-tag>
                    </template>
                    <template #footer>
                        <div class="flex-column mt15">
                            <div class="flex-column align-items-start">
                                <div>创建时间：{{item.create}}</div>
                                <div>订单编号：{{item.number}}</div>
                            </div>
                            <div class="mt10">
                                <van-button v-if="item.state==1||item.state==4" color="#ff6f00" size="mini"
                                            @click="pay(item.id)">支付
                                </van-button>
                                <van-button v-if="item.state==2" type="info" size="mini"
                                            @click="showCode(item.goods_link)">核验码
                                </van-button>
                                <van-button v-if="item.state==1" color="#888" size="mini" plain @click="leave(item.id)">取消</van-button>
                            </div>
                        </div>
                    </template>
                </van-card>
            </div>
        </van-list>
        <van-popup v-model="show">
            <vue-qr :text="link"></vue-qr>
        </van-popup>
    </div>
</template>
<script>
    import vueQr from 'vue-qr'
    import {Dialog} from 'vant';

    export default {
        name: "Order",
        data() {
            return {
                list: [],
                active: 0,
                link: '',
                show: false,
                url: {
                    order: this.axiosUrl + 'order/order',
                    found: this.axiosUrl + 'Money/found',
                    leave: this.axiosUrl + 'Order/leave',
                },
                config: {
                    loading: false,
                    finished: false,
                    pageIndex: 1,
                    limit: 10,
                    time: '',
                }
            }
        },
        components: {
            vueQr
        },
        mounted() {
            setTimeout(() => {
                this.active = Number(this.$route.query.state)
                this.order()
            }, 0)
            this.$wxConfig.share(this.$route.path)
        },
        methods: {
            leave(order) {
                let _this = this
                Dialog.confirm({
                    title: '提示',
                    message: '确认取消该订单？',
                })
                    .then(() => {
                        _this.$http.post(_this.url.leave, {order}, () => {
                            _this.$toast('取消成功')
                            _this.tabChange()
                        })
                    })
                    .catch(() => {
                        // on cancel
                    });
            },
            pay(order) {
                let _this = this
                _this.$http.post(_this.url.found, {order}, (res) => {
                    _this.$wxPay(res.appId, res.timeStamp, res.nonceStr, res.package, res.signType, res.paySign,()=>{_this.tabChange()})
                })
            },
            order() {
                let _this = this
                _this.config.loading = true
                _this.time = new Date().getTime()
                let e = new Date().getTime()
                setTimeout(() => {
                    if (_this.time == e) {
                        _this.$http.post(_this.url.order, {
                            state: _this.active * 1 + 1,
                            pages: _this.config.pageIndex,
                            limit: _this.config.limit
                        }, (res) => {
                            _this.list = _this.list.concat(res)
                            _this.config.pageIndex++
                            if (res.length < _this.config.limit) {
                                _this.config.finished = true
                            } else {
                                _this.config.finished = false
                            }
                            _this.config.loading = false
                        })
                    }
                }, 300)
            },
            tabChange() {
                let _this = this
                _this.list = []
                _this.config.finished = false
                _this.config.pageIndex = 1
                _this.order()
            },
            showCode(link) {
                this.link = link
                this.show = true
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .van-button {
        width 60px
        font-size 12px
        border-radius 3px
        margin-left 8px
    }

    .van-card__price {
        width 100%
    }

    .van-tabs__line {
        background-color #ff6f00
    }

    .van-card {
        padding 16px
    }

    .order-list
        margin 16px
        box-shadow 0 0 10px #ccc
        border-radius 8px
        overflow hidden

</style>
